<template>
    <el-input-number
        v-model="formData[item.prop]"
        :class="item.isClass && 'use-input-number'"
        :min="item.min"
        :max="item.max"
        :disabled="disabled || item.disabled"
        :size="item.size"
        @change="change"
    />
</template>

<script>
import { useFormProps, changeItem } from './useFormProps'
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'UseInputNumber',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const change = () => {
            changeItem(context, props)
        }
        return {
            change
        }
    }
})
</script>

<style lang="scss" scoped>
.use-input-number {
  width: 124px;
  :deep(.el-input-number__decrease),
  :deep(.el-input-number__increase) {
    @include wh(32px, 32px);
    background: #fff;
    border: 1px solid $b-color;
    border-radius: 3px;
  }
  :deep(.el-input) {
    @include wh(48px, 32px);
    margin-left: 38px;
    .el-input__wrapper {
      padding: 0 8px;
    }
  }
}
</style>
